<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 350px;
            height: 480px;
            /* 背景属性 */
            background-image: url("img/bg.jpg");
            /* 设置背景图大小  px   %   contain cover
             第一个值代表图片宽度 第二个值代表图片高度*/
            background-size: 100% 100%;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        #head{
            position: absolute;
            left: 50px;
            top: 150px;
        }
        #head span{
            width: 40px;
            height: 26px;
            display: inline-block;
            background-image: url('img/bird0.png');
            /* 绝对定位  默认时根据当前浏览器可视化窗口定位的
            但是  如果一个元素为绝对定位  当他的外层有任意一个定位时
            （relative/absolute/fixed)
            这个时候 该元素就应该时相对于她外层的元素进行定位
             */
            position: absolute;
            top: 20px;
            right: 0;
        }
        #scoring{
            position: absolute;
            left: 50%;
            top: 40px;
            transform: translateX(-50%);
            font-size: 50px;
            z-index: 10;
        }
        #menu{
            position: absolute;
            left: 40%;
            top: 60%;
        }
        #bird{
            display: none;
            position: absolute;
            left: 30px;
            top: 40px;
            z-index: 10;
        }
        #ductWrap li{
            width: 62px;
            height: 423px;
            list-style-type: none;
            position: absolute;
            left: 300px;
            top: 0px;
        }
        /* 设置上半截管道 */
        .duct_up{
            background: url("img/up_mod.png");
            background-repeat: repeat-y;
            height: 120px;
            position: relative;
        }
        /* 设置上半截管道头的位置 */
        .duct_up img{
            position: absolute;
            bottom: 0;
        }
        .duct_down{
            background: url("img/down_mod.png");
            background-repeat: repeat-y;
            height: 203px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .duct_down img{
            position: absolute;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 头部 -->
        <div id="head">
            <img src="./img/head.jpg" alt="">
            <!-- head图片后面的小鸟 -->
            <span></span>
        </div>
        <!-- 分数 -->
        <div id="scoring">
            0
        </div>
        <!-- 开始按钮区域 -->
        <div id="menu">
            <img src="./img/start.jpg" alt="" id="start">
        </div>
        <!-- 飞翔的小鸟本鸟 -->
        <div id="bird">
            <img src="./img/down_bird1.png" alt="">
        </div>
        <!-- 管道 -->
        <ul id="ductWrap">

        </ul>
    </div>
</body>
<!-- 存放js代码部分 -->
<script>
    // 所有的游戏都是在点击start才开始
    // 获取到开始按钮
    var startBtn = document.querySelector("#start");
// head
    var head = document.querySelector("#head");
    var ductWrap = document.querySelector("#ductWrap");
    // 获取小鸟元素
    var bird = document.querySelector("#bird");
    // js  点击事件 onclick
    startBtn.onclick = function(){
        // 页面中初始的head/鸟/start图片消失
        // 隐藏开始按钮和head
        head.style.display="none";
        // parentNode 获取当前元素的父元素
        this.parentNode.style.display="none";
        bird.style.display="block";
        // 随机函数  用来随机产生管道的高度  最大值和最小值的随机整数
        function randFn(min,max){
            // parseInt 向下取整
            return parseInt(Math.random() * (max - min +1) + min);
        }
        // 创建管道 在点击开始按钮之前，通过计时器创建  每隔三秒在页面中产生一根管道
        creatDuctTimer = setInterval(function(){
            // createElement 创建li元素 创建每一根管道
           var duct = document.createElement("li");
            // 上半截管道的高度
            var upHeight = randFn(60,240);
            // 下半截管道的高度   100是管道间固定间距
            var downHeight = 432 - upHeight - 100;
            duct.innerHTML = '<div class = duct_up duct_row style="height: '+ upHeight+' px"><img src="img/up_pipe.png"></div><div class="duct_down duct_row" style="height:'+ downHeight + 'px"><img src="img/down_pipe.png"></div>'
            // 定义柱子出现的初始位置
            duct.l = 300;
            // 管道的移动 通过循环定时器设置使管道的left值不断递减实现管道从右往左持续的移动
            duct.moveTimer = setInterval(function(){
                // 每隔30ms向左位移3px
                duct.l -= 3;
                duct.style.left = duct.l + "px";
            },30)
            // 将创建的管道添加到外层的ul中  
            ductWrap.appendChild(duct);
        },3000)
    }
</script>
</html>